<template>
	<view>
		<view :class="type?'edit-item':'look-item'">
			
			<view class="flex align-center">
				<view class="title">头像</view>
				<view class="flex align-center justify-end w-max-100" @click="upFileImg('avatar')">
					<image class="head_url" :src="avatar" mode=""></image>
					<image v-if="type" class="right-icon ml-2" src="../../static/images/right.png"></image>
				</view>
			</view>
			
			<view class="flex align-center">
				<view class="title">昵称</view>
				<view class="value" v-if="!type">{{ nickname || '-' }}</view>
				<view class="flex align-center justify-between w-max-100" v-if="type">
					<input class="edit-font w-max-100" type="text" v-model="nickname" placeholder="请输入" />
				</view>
			</view>
			
			<view class="flex align-center">
				<view class="title">手机号</view>
				<view class="value" v-if="!type">{{ mobile || '-' }}</view>
				<view class="flex align-center justify-between w-max-100" v-if="type">
					<input class="edit-font w-max-100" type="number" v-model="mobile" placeholder="请输入" />
				</view>
			</view>
			
			<view class="flex align-center">
				<view class="title">地址</view>
				<view class="value w-max-100 edit-font" style="text-align: right;" @click="openAddres">{{ city || '-' }}</view>
			</view>
			
			<view class="flex align-center">
				<view class="title">住址</view>
				<view class="value" v-if="!type">{{ address || '-' }}</view>
				<view class="flex align-center justify-between w-max-100" v-if="type">
					<input class="edit-font w-max-100" type="text" v-model="address" placeholder="请输入" />
				</view>
			</view>
	
		</view>

		<view class="edit-btn" @click="upDataInfo">{{type?'保存':'编辑'}}</view>
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	import { getUserInfo, postUpdateInfo } from "../../api/user.js";
	import { upFile } from "../../utils/url.js";
	import util from "../../utils/util.js"
	export default {
		components:{
			simpleAddress
		},
		data() {
			return {
				type: false, // true 编辑  false 查看
				cityPickerValueDefault: [0, 0, 0],
				
				avatar: '', // 头像
				nickname: '', // 昵称
				mobile: '', // 手机号
				address: '', // 住址
				city: '', // 省市区
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init(){
				this.getUserInfo()
			},
			// 查看用户信息
			async getUserInfo() {
				var data = {};
				data.uid = wx.getStorageSync('uid')
			
				var res = await getUserInfo(data);
				if(res.data.code == 1) {
					this.avatar = res.data.data.avatar; // 头像
					this.nickname = res.data.data.nickname; // 昵称
					this.mobile = res.data.data.mobile; // 手机号
					this.city = res.data.data.city; // 区
				}
			},
			
			// 上传图片
			upFileImg(key) {
				const self = this
				if(!self.type) return
				util.uploadImageOne({}, value => {
					self[key] = value.data.fullurl;
				});
			},
			
			// 省市区
			openAddres() {
				if(!this.type) return
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				this.cityPickerValueDefault = e.value;
				this.city = e.labelArr.join('/'); // 区
			},
			
			
			// 上传用户信息
			async upDataInfo() {
				var type = this.type;
				if(type) {
					// 修改用户信息
					var data = {
						avatar: this.avatar, // 头像
						nickname: this.nickname, // 昵称
						mobile: this.mobile, // 手机号
						address: this.address, // 住址
						city: this.city // 省市区
					}
					data.token = uni.getStorageSync('token')
					var res = await postUpdateInfo(data)
					if(res.data.code == 1) {
						this.type = !this.type
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				}else {
					this.type = !this.type
				}
			}
		
		}
	}
</script>

<style scoped>
	page {
		background: #f6f6f8;
	}

	/* 查看 */
	.look-item>view {
		width: 100%;
		padding: 30rpx;
		border-bottom: solid 1rpx #f2f2f2;
		background-color: #FFFFFF;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.look-item .title {
		font-size: 28rpx;
		color: #333;
	}

	.look-item .value {
		font-size: 26rpx;
		color: #686868;
	}

	.title {
		min-width: 180rpx;
		margin-right: 20rpx;
	}

	/* 编辑 */
	.edit-item>view {
		background-color: #FFFFFF;
		padding: 25rpx 30rpx;
		border-bottom: solid 1rpx #f4f4f4;
		width: 100%;
		box-sizing: border-box;
		position: relative;
	}

	.edit-item .title {
		font-size: 24rpx;
		color: #545454;
	}

	.picker-veh {
		width: 110rpx;
	}

	.picker-veh image {
		width: 30rpx;
		height: 30rpx;
	}

	.edit-font {
		font-size: 25rpx;
		color: #323232;
		text-align: right;
	}

	.right-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.edit-item .must::before {
		content: "*";
		position: absolute;
		left: 12rpx;
		color: #ee0a24;

	}

	/* 编辑 保存 */
	.edit-btn {
		width: 690rpx;
		height: 80rpx;
		background-color: #49c265;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		margin: 20rpx auto;
		border-radius: 10rpx;
	}

	.w-max-100 {
		width: 100%;
	}
	.img-box{
		width: 310rpx;
		height: 200rpx;
		position: relative;
	}
	.img-box image {
		width: 100%;
		height: 100%;
	}
	.clzp-box > view {
		margin-right: 30rpx;
		margin-bottom: 30rpx;
		text-align: center;
		font-size: 24rpx;
	}
/* 	.clzp-box > view :nth-child(2n+n) {
		margin-right: 0 !important;
	}
	 */
	.head_url {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
</style>
